<template>
  <div class="eidt-address">
    <LayoutHeaderTitle title="修改地址" />
    <van-address-edit
      :address-info="info"
      :area-list="areaList"
      show-set-default
      @save="onSave"
    />
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
export default {
  middleware: "authenticated",
  layout: "notabbar",
  async asyncData({ params, redirect, app }) {
    let info = null;
    if (!params.address_id) {
      redirect({ name: "user-address" });
      return;
    }
    try {
      const { status, data } = await app.$apiAddressDetail({
        address_id: params.address_id
      });
      if (status === 0) {
        info = data;
        info.isDefault = data.address_default === "1";
        info.areaCode = data.post_code;
      }
    } catch (error) {}
    return { address_id: params.address_id, info };
  },
  data: () => ({
    areaList: areaList
  }),
  methods: {
    onSave(a) {
      const data = {
        address_id: a.id,
        address_detail: a.addressDetail,
        address_default: a.isDefault ? "1" : "0",
        post_code: a.areaCode,
        name: a.name,
        tel: a.tel,
        province: a.province,
        city: a.city,
        county: a.county,
      };
      const load = this.$helperLoadding("");
      this.$apiUpdateAddress(data).finally(() => {
        load.clear();
        this.$router.go(-1);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.eidt-address {
  padding-top: 50px;
  background-color: #f7f8fa;
  height: 100vh;
  box-sizing: border-box;
  ::v-deep .van-address-edit-detail {
    padding: 0;
  }
}
</style>
